<template>
  <div class="processing">
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items" prop="orderId">
        <el-input v-model="searchMap.orderId" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item class="items" prop="orderOpenid">
        <el-input
          v-model="searchMap.orderOpenid"
          placeholder="用户编号"
        ></el-input>
      </el-form-item>
      <el-form-item class="items" prop="orderPhone">
        <el-input
          v-model="searchMap.orderPhone"
          placeholder="手机号"
        ></el-input>
      </el-form-item>

      <el-form-item class="itemss" prop="value2">
        <el-date-picker
          class="itemsss"
          v-model="searchMap.value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
      </el-form-item>
    </el-form>

    <el-table
      :data="list"
      border
      stripe
      style="width: 100%; font-size: 2px; height: 100%"
      :cell-style="{ padding: '0px' }"
      :row-style="{ height: '36px' }"
    >
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="" label="图书" width="80">
        <template
          slot-scope="scope"
          @click="lookOrder(scope.row.orderId, scope.row.index)"
        >
          <el-image
            class="imgs"
            :src="scope.row.orderBookUrl"
            :preview-src-list="look(scope.row.orderBookUrl)"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="orderBookName" label="书名">
        <template scope="scope">
          <div @click="lookOrder(scope.$index)">
            {{ scope.row.orderBookName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderUserNickName" label="用户"></el-table-column>
      <el-table-column prop="orderBookPprice" label="单价"> </el-table-column>
      <el-table-column prop="orderCounts" label="购买数量"> </el-table-column>
      <el-table-column prop="orderMoney" label="总金额"> </el-table-column>
      <el-table-column prop="orderTime" label="下单时间"> </el-table-column>
      <el-table-column label="执行操作" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="goConfirmOrder(scope.row.orderId)"
            >送达</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      title="订单信息"
      :visible.sync="drawer"
      :direction="direction"
      :size="'32%'"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <div id="pdfCentent">
        <div style="padding: 0 10px 6px 12px">
          <span style="margin-left: 100px">订单信息</span>
        </div>
        <div style="padding: 0 10px 6px 12px">
          <span>订单编号:</span>
          <span style="padding-left: 10px">{{ book.orderId }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>书名:</span>
          <span style="padding-left: 10px">{{ book.orderBookName }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>图书编号:</span>
          <span style="padding-left: 10px">{{ book.orderBookId }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>ISBN:</span>
          <span style="padding-left: 10px">{{ book.orderBookISBN }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>用户ID:</span>
          <span style="padding-left: 10px">{{ book.orderOpenid }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>用户昵称:</span>
          <span style="padding-left: 10px">{{ book.orderUserNickName }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>收件人:</span>
          <span style="padding-left: 10px">{{ book.orderRecipient }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>手机号:</span>
          <span style="padding-left: 10px">{{ book.orderPhone }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>详细地址:</span>
          <span style="padding-left: 10px">{{ book.orderAddress }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>单价:</span>
          <span style="padding-left: 10px">{{ book.orderBookPprice }}元</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>数量:</span>
          <span style="padding-left: 10px">{{ book.orderCounts }}件</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>总额:</span>
          <span style="padding-left: 10px">{{ book.orderMoney }}元</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>时间:</span>
          <span style="padding-left: 10px">{{ book.orderTime }}</span>
        </div>
        <div style="padding: 6px 10px 6px 12px">
          <span>取件签名:</span>
        </div>
      </div>
      <el-button
        type="danger"
        style="margin-left: 100px"
        @click="ExportSavePdf(htmlTitle, nowTime)"
        >导出PDF</el-button
      >
    </el-drawer>
  </div>
</template>

<script>
import orderApi from "@/api/order";
export default {
  data() {
    return {
      htmlTitle: "order",
      nowTime: "",
      list: [],
      searchMap: {
        orderId: "",
        orderOpenid: "",
        orderPhone: "",
        value2: "",
        orderStatus: "待收货",
      },
      book: {
        orderId: "",
        orderBookName: "",
        orderBookId: "",
        orderBookISBN: "",
        orderOpenid: "",
        orderUserNickName: "",
        orderRecipient: "",
        orderPhone: "",
        orderAddress: "",
        orderBookPprice: "",
        orderCounts: "",
        orderMoney: "",
        orderTime: "",
      },
      direction: "rtl",
      drawer: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近七天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三十天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    look(url) {
      let photo = [];
      photo.push(url);
      return photo;
    },
    goConfirmOrder(orderId) {
      this.$confirm("已经完成订单?", "提示", {
        confirmButtonText: "完成",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        orderApi.confirmOrder(orderId).then((res) => {
          if (res.data == 1) {
            this.$message({
              type: "success",
              message: "执行成功!",
            });
            this.fetchData()
          }
        });
      });
    },
    lookOrder(index) {
      this.book.orderId = this.list[index].orderId;
      this.book.orderBookName = this.list[index].orderBookName;
      this.book.orderBookId = this.list[index].orderBookId;
      this.book.orderBookISBN = this.list[index].orderBookISBN;
      this.book.orderOpenid = this.list[index].orderOpenid;
      this.book.orderUserNickName = this.list[index].orderUserNickName;
      this.book.orderRecipient = this.list[index].orderRecipient;
      this.book.orderPhone = this.list[index].orderPhone;
      this.book.orderAddress = this.list[index].orderAddress;
      this.book.orderBookPprice = this.list[index].orderBookPprice;
      this.book.orderCounts = this.list[index].orderCounts;
      this.book.orderMoney = this.list[index].orderMoney;
      this.book.orderTime = this.list[index].orderTime;
      return (this.drawer = true);
    },
    fetchData() {
      orderApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
    handleClose(done) {
      done();
    },
  },
};
</script>

<style scoped>
.processing {
  height: 100%;
}
.el-breadcrumb {
  height: 5px;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.line {
  border-left: 3px solid #31c17b;
  padding-left: 10px;
}
.imgs {
  width: 40px;
  height: 40px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
</style>